<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@include file="/common/scripts.jsp" %>
<title>APP Spotlight</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sticky-navigationbar.js"></script>
<script type="text/javascript" src="js/jquery.dotdotdot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/html_content.css"/>
<script type="text/javascript" src="js/FWDUltimate3DCarousel.js"></script>
		<!-- Setup the carousel (all settings are explained in detail in the documentation files) -->
		<script type="text/javascript">
			var carousel;
			
			FWDU3DCarUtils.onReady(function(){
				carousel = new FWDUltimate3DCarousel({
					
					//required settings
					carouselHolderDivId:"myDiv",
					carouselDataListDivId:"carouselData",
					displayType:"fixed",
					autoScale:"yes",
					carouselWidth:940,
					carouselHeight:400,
					skinPath:"load/skin_modern_silver",
												
					//main settings
					backgroundColor:"",
					backgroundImagePath:"",
					thumbnailsBackgroundImagePath:"",
					scrollbarBackgroundImagePath:"",
					backgroundRepeat:"repeat-x",
					carouselStartPosition:"center",
					carouselTopology:"star",
					carouselXRadius:428,
					carouselYRadius:0,
					carouselXRotation:10,
					carouselYOffset:0,
					showCenterImage:"no",
					centerImagePath:"",
					centerImageYOffset:0,
					showDisplay2DAlways:"no",
					slideshowDelay:5000,
					autoplay:"yes",
					showPrevButton:"no",
					showNextButton:"no",
					showSlideshowButton:"no",
					disableNextAndPrevButtonsOnMobile:"no",
					controlsMaxWidth:940,
					controlsHeight:31,
					controlsPosition:"bottom",
					slideshowTimerColor:"#777777",
					rightClickContextMenu:"developer",
					addKeyboardSupport:"yes",
					fluidWidthZIndex:1000,
												
					//thumbnail settings
					thumbnailWidth:400,
					thumbnailHeight:266,
					thumbnailBorderSize:10,
					thumbnailMinimumAlpha:.1,
					thumbnailBackgroundColor:"#666666",
					thumbnailBorderColor1:"#fcfdfd",
					thumbnailBorderColor2:"#e4e4e4",
					transparentImages:"no",
					maxNumberOfThumbnailsOnMobile:13,
					showThumbnailsGradient:"yes",
					showThumbnailsHtmlContent:"no",
					textBackgroundColor:"#333333",
					textBackgroundOpacity:.7,
					showText:"yes",
					showTextBackgroundImage:"yes",
					showFullTextWithoutHover:"no",
					showThumbnailBoxShadow:"yes",
					thumbnailBoxShadowCss:"0px 2px 2px #555555",
					showReflection:"yes",
					reflectionHeight:60,
					reflectionDistance:0,
					reflectionOpacity:.7,
												
					//scrollbar settings
					showScrollbar:"no",
					disableScrollbarOnMobile:"no",
					enableMouseWheelScroll:"no",
					scrollbarHandlerWidth:300,
					scrollbarTextColorNormal:"#777777",
					scrollbarTextColorSelected:"#000000",
												
					//combobox settings
					showComboBox:"no",
					startAtCategory:1,
					selectLabel:"SELECT CATEGORIES",
					allCategoriesLabel:"All Categories",
					showAllCategories:"no",
					comboBoxPosition:"topright",
					selectorBackgroundNormalColor1:"#fcfdfd",
					selectorBackgroundNormalColor2:"#e4e4e4",
					selectorBackgroundSelectedColor1:"#a7a7a7",
					selectorBackgroundSelectedColor2:"#8e8e8e",
					selectorTextNormalColor:"#8b8b8b",
					selectorTextSelectedColor:"#FFFFFF",
					buttonBackgroundNormalColor1:"#e7e7e7",
					buttonBackgroundNormalColor2:"#e7e7e7",
					buttonBackgroundSelectedColor1:"#a7a7a7",
					buttonBackgroundSelectedColor2:"#8e8e8e",
					buttonTextNormalColor:"#000000",
					buttonTextSelectedColor:"#FFFFFF",
					comboBoxShadowColor:"#000000",
					comboBoxHorizontalMargins:12,
					comboBoxVerticalMargins:20,
					comboBoxCornerRadius:0,
					
					//lightbox settings
					addLightBoxKeyboardSupport:"no",
					showLightBoxNextAndPrevButtons:"no",
					showLightBoxZoomButton:"no",
					showLightBoxInfoButton:"no",
					showLighBoxSlideShowButton:"no",
					showLightBoxInfoWindowByDefault:"no",
					slideShowAutoPlay:"no",
					lightBoxVideoAutoPlay:"no",
					lightBoxVideoWidth:640,
					lightBoxVideoHeight:520,
					lightBoxIframeWidth:1100,
					lightBoxIframeHeight:450,
					lightBoxBackgroundColor:"#000000",
					lightBoxInfoWindowBackgroundColor:"#FFFFFF",
					lightBoxItemBorderColor1:"#fcfdfd",
					lightBoxItemBorderColor2:"#e4FFe4",
					lightBoxItemBackgroundColor:"#333333",
					lightBoxMainBackgroundOpacity:.8,
					lightBoxInfoWindowBackgroundOpacity:.9,
					lightBoxBorderSize:0,
					lightBoxBorderRadius:0,
					lightBoxSlideShowDelay:4000
				});
				
				carousel.addListener(FWDUltimate3DCarousel.IS_API_READY, onApiReady);
				carousel.addListener(FWDUltimate3DCarousel.THUMB_CHANGE, onThumbChange);
				carousel.addListener(FWDUltimate3DCarousel.CATEGORY_CHANGE, onCategoryChange);
			})
			
			function gotoNextCategory()
			{
				carousel.switchCategory(carousel.getCurrentCategoryId() + 1);
			}
			
			function gotoNextThumb()
			{
				carousel.gotoThumb(carousel.getCurrentThumbId() + 1);
			}
			
			function gotoPrevThumb()
			{
				carousel.gotoThumb(carousel.getCurrentThumbId() - 1);
			}
			
			function startStopSlideshow()
			{
				if (carousel.isSlideshowPlaying())
				{
					carousel.stopSlideshow();
				}
				else
				{
					carousel.startSlideshow();
				}
			}
			
			function onApiReady()
			{
				console.log("api ready");
			}
			
			function onThumbChange(ev)
			{
				console.log("thumb id: " + ev.id);
			}
			
			function onCategoryChange(ev)
			{
				console.log("category id: " + ev.id);
			}
		</script>
<link rel="stylesheet" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery.colorbox.js"></script>		
		<script>
			$(document).ready(function(){
				//Examples of how to assign the Colorbox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
				$(".iframe").colorbox({iframe:true, width:"1160px", height:"450px"});
				$(".iframe1").colorbox({iframe:true, width:"770px", height:"450px"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});

				$('.non-retina').colorbox({rel:'group5', transition:'none'})
				$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
			
			$(function(){
			    $(".app_desc").dotdotdot({
			        /*  The HTML to add as ellipsis. */
			        ellipsis  : '... ',
			        /*  How to cut off the text/html: 'word'/'letter'/'children' */
			        wrap    : 'letter',
			        /*  Wrap-option fallback to 'letter' for long words */
			        fallbackToLetter: true,
			        /*  jQuery-selector for the element to keep and put after the ellipsis. */
			        after   : null,
			        /*  Whether to update the ellipsis: true/'window' */
			        watch   : 'window',
			        /*  Optionally set a max-height, if null, the height will be measured. */
			        height    : 50,
			        /*  Deviation for the height-option. */
			        tolerance : 0,
			        /*  Callback function that is fired after the ellipsis is added,
			          receives two parameters: isTruncated(boolean), orgContent(string). */
			        callback  : function( isTruncated, orgContent ) {},
			        lastCharacter : {
			          /*  Remove these characters from the end of the truncated text. */
			          remove    : [ ' ', ',', ';', '.', '!', '?' ],
			          /*  Don't add an ellipsis if this array contains
			            the last character of the truncated text. */
			          noEllipsis  : []
			        }
			      }); 
			});
		</script>			
</head>
<body id="top">

<div id="top_wrapper">
<p id="back-top">
		<a href="#top"><span></span>TOP</a>
</p>
<script>
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

</script>
	<div id="head_top">
		<div class="head_container">
			<div id="app_logo" onclick="location.href='index.html';" style="cursor:pointer"></div>
		</div>
	</div>
 	<div id="sticky_navigation_wrapper">
		<div id="sticky_navigation" style="display: none">
<!-- 			<div class="bar_container">
				<ul>
					<li><a href="#" class="selected">首 頁</a></li>
					<li><a href="#">熱門排行</a></li>
					<li><a href="#">各國限定APP</a></li>
					<li><a href="#">專題評測</a></li>
					<li><a href="#">許願專區</a></li>
					<li><a href="#">儲值點數</a></li>
					<li><a href="#">積分兌換</a></li>
					<li><a href="#">APP市集</a></li>
					<li><a href="#">產品下載</a></li>
				</ul>
			</div> -->
		</div>
	</div>

	
</div><!-- #demo_top_wrapper -->

<!-- everything below is just content -->

<section id="main">

	<div id="content">


<!-- div used as a holder for the carousel -->
		<div id="myDiv"></div>
		
	
		<!-- carousel data -->
		<div id="carouselData" style="display: none;">
			
			<!-- image datalist category 1 -->
			<ul data-cat="Category one">
                <c:forEach var="ad" items="${appAdItemList }"> 
                  <ul>
                    <c:choose>
                      <c:when test="${ad.appItem != null }">
                      <li data-type="iframe" data-url="<c:url value='/app${ad.appItem.id }'/>"></li>
                      </c:when>
                      <c:when test="${ad.adUrl != null }">
                      <li data-type="iframe" data-url="${ad.adUrl }"></li>
                      </c:when> 
                    </c:choose>
                    <li data-thumbnail-path="<c:url value='/app/image/${ad.sysImage.id}'/>"></li>
                    <li data-thumbnail-text="" data-thumbnail-text-title-offset="35"
                    data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
                      <p class="largeLabel">${ad.slogn }</p>
                      <p class="smallLabel">${ad.adDesc }</p>
                    </li>
                  </ul>                
                </c:forEach>
			</ul>
			<!-- end  -->
		</div>

	</div>
	
	
</section><!-- #main -->
<section id="main2" style="height: ${fn:length(sourceList)*45}%;">
<div id="container">
<!------------- 熱門文章&熱門推薦------------------------>
<div id="content3">
<!-- 	<div class="home-col3">
		<h2>熱門文章</h2>
		<div class="newslist"><a class='iframe' href="lightbox.html">此次專案構想,是我的長官,想要做一個「網站平台」來展示</a></div>
		<div class="newslist2">網站包含計數功能(需有一個適合放計數器的地方)台」來展示</div>
		<div class="newslist">此次專案構想,是我的長官,想要做一個「網站平台」來展示</div>

	</div> -->
	<div class="home-col4">
		<h2>熱門推薦</h2> 
        <c:forEach var="hot" items="${hotList }">
          <c:choose>
            <c:when test="${hot.appItem != null }">
            <a class='iframe' href="<c:url value='/app${hot.appItem.id }'/>"><div class="commercial" style="background-image: url(<c:url value='/app/image/${hot.sysImage.id }'/>); background-size:cover;"></div></a>
            </c:when>
            <c:when test="${hot.adUrl != null }">
            <a href="${hot.adUrl }" target="_blank"><div class="commercial" style="background-image: url(<c:url value='/app/image/${hot.sysImage.id }'/>); background-size:cover;"></div></a>
            </c:when> 
          </c:choose>           
        </c:forEach>
	</div>	
</div>

<!------------- 熱門文章&熱門推薦------------------------>


<c:forEach var="source" items="${sourceList }" varStatus="s">
  <div id="content1">
    <div class="home-col1"><!--  <div class="more"><a href="#">Check For More ></a></div> -->
    <h4>${source.dictionaryName }</h4> 
        <div style="border: dashed 0px #693; float:left; display:inline-block; width:665px;" >
        <div class="arrow-left" onclick='slider${s.count}.prev();return false;'></div><div class="arrow-right" onclick='slider${s.count}.next();return false;'></div>
        <div id='slider${s.count }' class='swipe'>
          <div>
          <c:set var="appItemMapList" value='${appItemMap[source.id] }'/>
          <c:set var="length" value="${fn:length(appItemMapList) }"/>
          <c:set var="rows" value="${length / 5}"/>
          <c:forEach var="row" begin="0" end="${rows }">
          <div style='display:block'>
          <c:forEach var="cell" begin="0" end="4"><c:set var="item" value="${appItemMapList[row*5+cell] }"/><c:if test="${item!=null }"><div style="height:150px;vertical-align: top"><a class='iframe' href="<c:url value='/app${item.id }'/>"><div class="koma" style="background-image: url('<c:url value='/app/image/${item.imageId}'/>'); background-size:cover;border-radius:25px;margin:0 16px 0 0px"></div><p style="text-align:left; margin-left:5px"><font class="app_desc">${item.appName}</font><br>${item.categoryName}</p></a></div></c:if></c:forEach>
          </div>
          </c:forEach>        
          </div>
          <div>
          </div>
        </div>
        
        </div>
  
    </div>    
  <script src='js/swipe.js'></script>
  <script>
  var slider${s.count } = new Swipe(document.getElementById('slider${s.count}'));
  </script>
  </div>
</c:forEach>
</div>
</section>	
<footer>
	<p><font size="1">指導單位：</font><img src="<c:url value='/images/logo_01.png'/>" width="140" height="25" />&nbsp;&nbsp;&nbsp;<font size="1">主辦單位：</font><img src="<c:url value='/images/logo_02.png'/>" width="140" height="30"/>&nbsp;&nbsp;&nbsp;<font size="1">執行單位：</font><img src="<c:url value='/images/logo_03.png'/>" width="140" height="18"/>&nbsp;&nbsp;&nbsp;</p>
        <p id="p2">&nbsp;&nbsp;&nbsp;&nbsp;<a href="<c:url value='privacy'/>" class="iframe1" >智慧財產權聲明</a>&nbsp;．&nbsp;<a href="mailto:eventservice@iii.org.tw">聯絡我們</a>&nbsp;．</p>
        <c:if test="${sysParamMap['accessibility.display'] =='true' }"><p><img src="<c:url value='/images/a.jpg'/>"></p></c:if>    
</footer>
<script src="http://counter.i2yes.com/i2yesCounter.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var $counter = $(i2yesCounter.render({ y:'counter',
        p:'appspotlight',
        v:'spotlight.dcipo.org.tw',
        d:8, 
        r:1,
        t:'font001',
        s:80,
        n:800
        }));
    $counter = $($counter.html());
    $counter.attr("title","");
    $counter.attr("alt","");
    $("#p2").append("&nbsp;&nbsp;&nbsp;")
    $("#p2").append($counter);
});
</script>
</body>
</html>